<?php 
require 'header.php';
$data=require 'db.php';
 ?>
<style type="text/css">
body{padding: 20px;background: url(2.jpg)}
*{padding: 0px;margin: 0px;}
span.error{color:#f00;border:solid 1px #f00;padding: 5px;width: 100px;height: 20px;}
dl{
	border:solid 1px #999;padding: 15px;
	margin-bottom: 10px;
}
dl dt{border-bottom:solid 1px #999; }
dl dt span{float: right;}
dl dd{padding-top: 10px;}
a{
	text-decoration: none;
	font-size: 14px;
}

 </style>
<h3>
	<a href='resetDb.php' onclick="return confirm('你造吗？删除之后啥都木有了啊！')">清空数据</a>
	<form action="search.php" method="post">
		<input type="text" name="wd">
		<input type="submit" value="搜索">
	</form>
</h3>
<br/>
<form action="add.php" method="post" id="addForm">
	<table border="1">
		<tr>
			<th>留言标题</th>
			<td>
				<input type="text" name="title">
				<span id='hd-title'></span>
			</td>
		</tr>
		<tr>
			<th>留言内容</th>
			<td>
				<textarea name="content" style="width:300px;height:100px;"></textarea>
				<span id='hd-content'></span>
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<button type='submit'>发表</button>
			</td>
		</tr>
	</table>
</form>
<?php foreach ($data as $field) {?>
	<dl>
		<dt><?php echo $field['title'];?><span>(<?php echo $field['time'];?>)</span></dt>
		<dd>
			<?php echo $field['content']; ?>
		</dd>
	</dl>
<?php } ?>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
	$('#addForm').submit(function() {
		var status=true;
		if ($('[name=title]').val().trim()==''){
			$('span#hd-title').show().html('标题不能为空').addClass('error');
			status=false;
		}else{
			$('span#hd-title').hide();
		};
		if ($('[name=content]').val().trim()==''){
			$('span#hd-content').show().html('内容不能为空').addClass('error');
			status=false;
		}else{
			$('span#hd-content').hide();
		}
		return status;
	})
</script>